<template>
	<view>
		<view class="my-kehu-view">
			<view class="fx-center">
				<view class="tab-item" :class="tabIndex === index ? 'tab-item-active' : ''" v-for="(item,index) in tabs"
					:key="index" @click="changeTab(index)">
					{{item}}
				</view>
			</view>
			<view class="kehu-list main-basic-box" v-for="item in list" :key="item.id" @click="toDetail(item)"
				v-if="list.length>0">
				<view class="fx-center">
					<view class="main-basic-name">{{item.project.name}}</view>
					<view class="tag-item color1"
						:class="item.order_type == 4 ? 'color1' : item.order_type == 2 ? 'color2' :item.order_type == 1 ? 'color3' : 'tag-other'">
						{{item.order_typename}}
					</view>
					<view class="tag-item tag-other" v-if="item.state==2">无效</view>
				</view>
				<view class="fx-center kehu-info">
					<view class="info-item">姓名 <text>{{item.payload.name || '-'}}</text></view>
					<view class="info-item" v-if="item.order_type == 2">平台 <text>{{item.payload.pl_name || ''}}</text>
					</view>
					<view class="info-item" v-if="item.order_type == 1">平台 <text>{{item.payload.pl_source || ''}}</text>
					</view>
					<view class="info-item" v-if="item.order_type == 4">电话 <text>{{item.payload.phone || ''}}</text>
					</view>
				</view>
				<view class="fx-center kehu-info">
					<view class="info-item">成交金额 <text>{{item.payload.price || '-'}}</text></view>
					<view class="info-item">佣金 <text>{{item.earn || '-'}}元</text></view>
				</view>
				<view class="info-time">录入时间：{{item.create_time}}</view>
			</view>
			<view class="main-no-data" style="background: #fff;margin-top: 32rpx;" v-else>
				<image src="/static/empty_img.png" mode="widthFix"></image>
				<view class="">暂无记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['全部', '成交客户', '客资线索', '任务反馈'],
				tabIndex: 0,
				page: 1,
				total: 0,
				list: []
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.getList()
			} else {
				this.$api.showError('没有更多数据了哦')
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		methods: {
			getList() {
				this.$api
					.requst('/gwc/orders', {
						page: this.page,
						order_type: (this.tabIndex === 1 ? 4 : this.tabIndex === 2 ? 1 : this.tabIndex === 3 ? 2 : '')
					}, )
					.then((res) => {
						this.total = res.total
						if (this.page === 1) {
							this.list = res.data
						} else {
							res.data.forEach(item => {
								this.list.push(item)
							})
						}
					})
			},
			changeTab(index) {
				this.tabIndex = index
				this.page = 1
				this.getList()
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/workbench/myKehu/kehuDetail/kehuDetail?no=' + item.no
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-kehu-view {
		padding: 28rpx 24rpx 50rpx;
		box-sizing: border-box;

		.tab-item {
			font-size: 30rpx;
			color: #5C5F66;
			margin-right: 48rpx;
		}

		.tab-item-active {
			font-weight: bold;
			color: #161616;
		}

		.kehu-list {
			margin-left: 0;
			margin-right: 0;

			.tag-item {
				width: 96rpx;
				height: 38rpx;
				border-radius: 4rpx;
				font-size: 20rpx;
				text-align: center;
				line-height: 38rpx;
				margin-left: 8rpx;
			}

			.color1 {
				color: #4078E5;
				background-color: rgba(#1866FE, 0.1);
			}

			.color2 {
				color: #FF5C00;
				background-color: rgba(#FF5C00, 0.06);
			}

			.color3 {
				color: #44CC45;
				background-color: rgba(#44CC45, 0.1);
			}

			.tag-other {
				width: 72rpx;
				color: #8A8F99;
				background-color: #F1F3F6;
			}

			.kehu-info {
				margin-top: 16rpx;

				.info-item {
					flex: 1;
					color: #5C5F66;
					font-size: 26rpx;

					text {
						color: #161616;
						margin-left: 16rpx;
					}
				}
			}

			.info-time {
				font-size: 26rpx;
				color: #8A8F99;
				margin-top: 16rpx;
			}
		}

		.kehu-list:first-child {
			margin-top: 32rpx;
		}
	}
</style>